<template>
    <div id="add-edit-FixedAssets">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
            @close="clean"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="资产编码" prop="v_AssetNo">
                            <el-input v-model="ruleForm.v_AssetNo" placeholder="请输入资产编码" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="资产分类" prop="v_Mode">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择资产分类" 
                                v-model="ruleForm.v_AssetType" 
                                @change="modeChange"
                            >
                                <el-option
                                    v-for="item in modeOption"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="资产名称" prop="v_Name">
                            <el-input v-model="ruleForm.v_Name" placeholder="请输入资产名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="规格">
                            <el-input v-model="ruleForm.v_Specification" placeholder="请输入规格" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="型号">
                            <el-input v-model="ruleForm.v_Model" placeholder="请输入型号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="原值">
                            <el-input v-model="ruleForm.v_OriginalValue" placeholder="请输入原值" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="管理部门">
                            <el-cascader 
                                v-model="ruleForm.l_ManageOrgId"
                                :options="orgOption" 
                                :props="orgProps" 
                                @change="orgChange"
                                filterable
                                clearable 
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="使用部门">
                            <el-cascader 
                                v-model="ruleForm.l_UseOrgId"
                                :options="orgOption" 
                                :props="orgProps" 
                                @change="useChange"
                                filterable
                                clearable 
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="管理人">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择管理人" 
                                v-model="ruleForm.l_ManagerId" 
                                @change="typeChange"
                            >
                                <el-option
                                    v-for="item in useOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="使用人">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择使用人" 
                                v-model="ruleForm.l_UserId" 
                                @change="typeChange"
                            >
                                <el-option
                                    v-for="item in useOption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="位置">
                            <el-input v-model="ruleForm.v_Place" placeholder="请输入位置" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备类型">
                            <el-select 
                                class="m-2" 
                                filterable
                                placeholder="请选择设备类型" 
                                v-model="ruleForm.l_MachineTypeId" 
                                @change="equTypeChange"
                            >
                                <el-option
                                    v-for="item in equTypeOption"
                                    :key="item.n_Id"
                                    :label="item.v_Name"
                                    :value="item.n_Id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="设备">
                            <el-select 
                                class="m-2" 
                                placeholder="请选择设备" 
                                filterable
                                v-model="ruleForm.l_MachineId" 
                                @change="equChange"
                            >
                                <el-option
                                    v-for="item in equOption"
                                    :key="item.n_Id"
                                    :label="item.v_Name"
                                    :value="item.n_Id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="资产状态">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择资产状态" 
                                v-model="ruleForm.n_State" 
                            >
                                <el-option
                                    v-for="item in stateOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="cancelUseClick">取 消</el-button>
                <el-button type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm(ruleFormRef)">提 交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules, ElButton, ElCol, ElDatePicker, ElDialog, ElForm, ElFormItem, ElInput, ElOption, ElRow, ElSelect } from 'element-plus'
import { 
    sysOrgTree , 
    sysEmpSelector ,
    ClassifyGetList ,
    EquipmentGetList ,
} from '/@/api/centerControl/pubilc';
import { 
    sysDictDataList ,
    SMSAssFixedAssetLedgerAdd ,
    SMSAssFixedAssetLedgerUpdate,
} from '/@/api/centerControl/sms';

/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    id?: Number,
    v_AssetNo: String, // 资产编码
    v_AssetType: String, // 资产分类名称(数据字典)
    v_Name: String, // 资产名称
    v_Specification: String, // 规格
    v_Model: String, // 型号
    v_OriginalValue: String, // 原值
    l_ManageOrgId: any, // 管理部门
    l_UseOrgId: any, // 使用部门
    l_ManagerId: any, // 管理人
    l_UserId: any, // 使用人
    v_Place: String, // 位置
    l_MachineTypeId: any, // 设备类型
    l_MachineId: any, // 设备
    n_State: Number, // 固定资产台账状态
}
export default defineComponent( {
    name: 'add-edit-FixedAssets',
    components: {},
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const modeOption = ref();
        const typeOption = ref();
        const orgOption = ref();
        const useOption = ref();
        const equOption = ref();
        const equTypeOption = ref();

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // 资产编码
            v_AssetNo: [
				{ required: true, message: '请输入资产编码', trigger: 'blur' },
			],
            // 资产分类名称(数据字典)
            v_AssetType: [
				{ required: true, message: '请选择资产分类名称', trigger: 'change' },
			],
            // 资产名称
            v_Name: [
				{ required: true, message: '请输入资产名称', trigger: 'blur' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelUseClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelUseClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    let param = toRaw(state.ruleForm);
                    console.log(param,'param')
                    state.repeatDis = true;
                    try{
                        let res:any;
                        if(props.repairInfo === ''){
                            res = await SMSAssFixedAssetLedgerAdd(param);
                        }else{
                            res = await SMSAssFixedAssetLedgerUpdate(param);
                        }
                        if(res.success){
                            state.repeatDis = false;
                            ctx.emit('updateData');
                            ctx.emit('controlUseClick');
                        }else{
                            state.repeatDis = false;
                        }
                    }catch(error){ state.repeatDis = false; }
                    
                }else{
                    state.repeatDis = false;
					return false;
                }
            })
        }

        /*** clean 清空数据 */
        const clean = () => {
            ruleFormRef.value.resetFields()
        }

        /*** getTree 获取组织架构树 */
        const getTree = async() => {
            let param = {}
            let res: any = await sysOrgTree(param);
            if(res.success) orgOption.value = res.data;
        }

        /*** getDictFun 获取课程类型字典值 */
        const getDictFun = async() => {
            let res: any = await sysDictDataList({ TypeCode: 'AssetType' });
            if(res.success) modeOption.value = res.data;
        }

        /*** 获取员工数据 */
        const getUseFun = async() => {
            let res: any = await sysEmpSelector({});
            if(res.success) useOption.value = res.data;
        }

        /*** 获取设备 */
        const getEquFun = async() => {
            let param: any = {};
            param.n_Type = 2;
            let res: any = await ClassifyGetList(param);
            if(res.success) equTypeOption.value = res.data;
        }

        /*** 获取设备下拉框 */
        const getEquListFun = async(id: number) => {
            let res: any = await EquipmentGetList({ N_TypeId: id });
            if(res.success) equOption.value = res.data;
        }
        
        /*** 设备类型改变事件 */
        const equTypeChange = (val: any) => {
            getEquListFun(val);
        }

        /*** 设备改变事件 */
        const equChange = (val: any) => {
            console.log(val,'val')
        }

        /*** 管理部门改变事件 */
        const orgChange = (val: any) => {
            let len = val.length;
            state.ruleForm.l_ManageOrgId = val[len - 1];
        }

        /*** 使用部门改变事件 */
        const useChange = (val: any) => {
            let len = val.length;
            state.ruleForm.l_UseOrgId = val[len - 1];
        }

        /*** 使用人选择事件 */
        const typeChange = () => {};

        /*** 资产分类选择事件 */
        const modeChange = () => {};

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                // 状态数据重置
                state.repeatDis = false;
                getTree();
                getDictFun();
                getUseFun();
                getEquFun();
                if(props.repairInfo !== ''){
                    titleCon.value = '编辑'
                    let getData = JSON.parse(props.repairInfo);
                    state.ruleForm = getData;
                }else{
                    titleCon.value = '新增';
                    state.ruleForm = {
                        v_AssetNo: '', // 资产编码
                        v_AssetType: '', // 资产分类名称(数据字典)
                        v_Name: '', // 资产名称
                        v_Specification: '', // 规格
                        v_Model: '', // 型号
                        v_OriginalValue: '', // 原值
                        l_ManageOrgId: '', // 管理部门
                        l_UseOrgId: '', // 使用部门
                        l_ManagerId: '', // 管理人
                        l_UserId: '', // 使用人
                        v_Place: '', // 位置
                        l_MachineTypeId: '', // 设备类型
                        l_MachineId: '', // 设备
                        n_State: 0, // 固定资产台账状态
                    }
                }
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            clean,
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            isUseDialog,
            rules,
            modeOption,
            modeChange,
            typeOption,
            typeChange,
            orgProps: { checkStrictly: true , label: 'title', value: 'id', children: 'children' },
            orgOption,
            orgChange,
            useChange,
            useOption,
            equTypeChange,
            equTypeOption,
            equOption,
            equChange,
            stateOption: [
                {label: '启用', value: 0},
                {label: '停用', value: 1},
                {label: '备用', value: 2},
                {label: '报废', value: 3},
            ],
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-cascader){
        width: 100%;
    }
    :deep(.el-select){
        width: 100%!important;
    }
    :deep(.el-input){
        width: 100%;
    }
</style>